<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>new event</title>
        <style>@import url("../resources/css/homepageCSS1.css")</style>
    </h:head>
    <h:body>

        <p:layout fullPage="true">
            <p:layoutUnit styleClass="topLayout" position="north" size="100" resizable="true">
                <img id="titleImg" src="../resources/images/titolo90.png" alt="METEOCAL"/>
                <div id="userBlock">
                    <h:form>
                        <p:outputLabel>
                            #{userBean.name}&nbsp;&nbsp;&nbsp;<b>|</b>&nbsp;&nbsp;&nbsp;
                        </p:outputLabel>
                        <p:commandLink style="color: blue;" value="Home" action="#{eventBean.backHome()}"/>
                        <p:outputLabel>
                            &nbsp;&nbsp;&nbsp;<b>|</b>&nbsp;&nbsp;&nbsp;
                        </p:outputLabel>
                        <p:commandLink style="color: blue;" action="#{loginBean.logout()}" value="Logout"/>
                    </h:form>
                </div>
            </p:layoutUnit>
            <p:layoutUnit styleClass="centralBlock" position="center">

                <table width="90%" align="center">
                    <tr>
                        <td width="50%" align="center">
                            <h:form>
                                <p:growl id="growl" autoUpdate="true" showDetail="false"/>
                                <p:panel styleClass="panelFormOpacity" header="New Event">
                                    <p:panelGrid id="eventGrid" columns="2">


                                        <h:outputText value="Title: "/>
                                        <p:inputText styleClass="inputTextStyle" id="title" value="#{eventBean.event.title}" required="true" requiredMessage="A title is required!">
                                        </p:inputText>

                                        <h:outputText value="Description: "/>
                                        <p:inputTextarea styleClass="inputTextStyle" id="description" rows="5" cols="20" maxlength="255" value="#{eventBean.event.description}"/>

                                        <h:outputText value="Country: "/>
                                        <p:inputText styleClass="inputTextStyle" id="country" value="#{eventBean.event.country}" required="true" requiredMessage="You must choose a country."/>

                                        <h:outputText value="City: "/>
                                        <p:inputText styleClass="inputTextStyle" id="city" value="#{eventBean.event.city}" required="true" requiredMessage="You must choose a city."/>

                                        <h:outputText value="Address: "/>
                                        <p:inputText styleClass="inputTextStyle" id="address" value="#{eventBean.event.address}"/>

                                        <h:outputText value="Visibility: "/>
                                        <p:selectOneButton id="visibility" value="#{eventBean.event.visibiltiy}" required="true" 
                                                           requiredMessage="You must pick one privacy option.">
                                            <f:selectItem itemLabel="Public" itemValue="PUBLIC"/>
                                            <f:selectItem itemLabel="Private" itemValue="PRIVATE"/>
                                        </p:selectOneButton> 

                                        <h:outputText value="Location: "/>
                                        <p:selectOneButton  id="location" value="#{eventBean.event.location}" required="true"
                                                            requiredMessage="You must pick one location.">
                                            <f:selectItem itemLabel="Indoor" itemValue="INDOOR"/>
                                            <f:selectItem itemLabel="Outdoor" itemValue="OUTDOOR"/>
                                        </p:selectOneButton> 

                                        <h:outputText value="Start Date: "/>
                                        <p:calendar id="startDate" timeZone="#{eventBean.timeZone}" binding="#{startDateComponent}" value="#{eventBean.event.startDate}" pattern="MM/dd/yyyy HH:mm">
                                        </p:calendar>

                                        <h:outputText value="End Date: "/>
                                        <p:calendar  timeZone="#{eventBean.timeZone}" id="endDate" value="#{eventBean.event.endDate}" pattern="MM/dd/yyyy HH:mm">
                                            <f:validator validatorId="dataRangeValidator"/>
                                            <f:attribute name="startDateComponent" value="#{startDateComponent}"/>
                                        </p:calendar>
                                    </p:panelGrid>

                                    <br/>
                                    <p:commandButton id="invitings" value="Invite" update="growl" action="#{eventBean.invitings('newEventPage')}"/>
                                    <p:commandButton id="submit" value="Submit" update="growl" action="#{eventBean.save()}"/>
                                </p:panel>
                            </h:form>
                        </td>
                        <td width="50%" valign="top">
                            <p:panel styleClass="panelFormOpacity">
                                <p:dataList emptyMessage="No one is invited." paginatorAlwaysVisible="false" paginatorPosition="bottom" value="#{eventBean.invited}" var="user" type="unordered" itemType="none" paginator="true" rows="10" styleClass="paginated">
                                    <f:facet name="header">
                                        Invited
                                    </f:facet>
                                    <h:outputText value="#{user}" style="display:inline-block" />
                                </p:dataList>
                            </p:panel>
                        </td>
                    </tr>
                </table>
            </p:layoutUnit>
        </p:layout>
    </h:body>
</html>

